<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发送ajax请求</title>
    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
</head>
<body>
    <div id="app">
        <a href="javascript:void(0);" @click="testAjax">访问springmvc后台controller</a><br/>
        <a href="javascript:void(0);" @click="testAjaxPojo">访问springmvc后台controller，传递Json格式POJO</a><br/>
        <a href="javascript:void(0);" @click="testAjaxList">访问springmvc后台controller，传递Json格式List</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnString">访问springmvc后台controller，返回字符串数据</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnJson">访问springmvc后台controller，返回Json数据</a><br/>
        <a href="javascript:void(0);" @click="testAjaxReturnJsonList">访问springmvc后台controller，返回Json数组数据</a><br/>
        <br/>
        <a href="javascript:void(0);" @click="testCross">跨域访问</a><br/>
    </div>
    <form action="uploadController/upload" method="post" enctype="multipart/form-data">
        <!--文件上传表单的name属性值一定要与controller处理器中方法的参数对应，否则无法实现文件上传-->
        上传LOGO：<input type="file" name="files"/><br/>
        上传照片：<input type="file" name="files"/><br/>
        上传任意文件：<input type="file" name="files"/><br/>
        <input type="submit" value="上传"/>
    </form>
</body>

<script>
    new Vue({
        el:"#app",
        data:{
            user:{name:"老李",age:20},
            userList:[
                {name:"老李",age:20},
                {name:"老王",age:21},
                {name:"老张",age:22}]
        },
        methods:{
            //访问springmvc后台controller
            testAjax(){
                    axios.get("ajax/ajaxController").then(resp=>{
                        console.log(resp.data);
                    })
            },
            //访问springmvc后台controller，传递Json格式POJO
            testAjaxPojo(){
                axios.post("ajax/ajaxPojoToController",this.user).then(resp=>{
                    console.log(resp.data);
                })
            },
            //访问springmvc后台controller，传递Json格式List
            testAjaxList(){
                    axios.post("ajax/ajaxListToController",this.userList).then(resp=>{
                        console.log(resp.data);
                    })
            },
            //访问springmvc后台controller，返回字符串数据
            testAjaxReturnString(){
                axios.get("ajax/ajaxReturnString").then(resp=>{
                    console.log(resp.data);
                })
            },
            //访问springmvc后台controller，返回Json对象数据
            testAjaxReturnJson(){
                axios.post("ajax/ajaxReturnJson").then(resp=>{
                    console.log(resp.data);
                })
            },
            //访问springmvc后台controller，返回Json数组数据
            testAjaxReturnJsonList(){
                axios.post("ajax/ajaxReturnJsonList").then(resp=>{
                    console.log(resp.data);
                })
            },
            //跨域访问
            testCross(){
                axios.get("http://localhost:8081/springmvc_02/ajax/cross").then(resp=>{
                    console.log(resp.data);
                })
            }
        }
    });

</script>
</html>